<template>
	<view class="drugList-wrap">
		<u-search class="search-input" :disabled="false" @input="search" :keyword="goodsName" placeholder="搜索疾病/症状/药品名">
		</u-search>

		<view class="myInquiry-tab" v-if="tabShow">
			<u-tabs v-model="common" :scroll="false" :tabs="['全部药品', '非常用药品', '常用药品']" @change="tabChange"></u-tabs>
		</view>

		<scroll-view show-scrollbar="false" class="drugList-list" scroll-y @scrolltolower="scrollLoading()">
			<!-- 处方中/西药 	@onClick="gotoRouter('/pages-inquiry/drugInfo/drugInfo?id=' + item.id)"-->
			<!-- @onClick="editDosage(item)" -->
			<u-select-goods v-if="category == '4,5,6' || category == '7'" v-for="(item, index) in goodsList"
				:type="category == '4,5,6' ? '0' : '1'" @onChange="selectGoodsChange($event, index)" :key="index"
				:data="item" :btnText="item.buyNum == 0 ? '添加药品' : '编辑用量'" @onClickBtn="editDosage(item)">
			</u-select-goods>

			<!-- 常用药品 @onClick="gotoRouter('/pages-inquiry/drugInfo/drugInfo?id=' + item.id)"-->
			<u-select-goods v-if="category == '4,5,6,7'" v-for="(item, index) in goodsList" type="0"
				@onClick="addCommonUseCommodity(item.id)" :key="index" :data="item" btnText="加入常用药品"
				@onClickBtn="addCommonUseCommodity(item.id)"></u-select-goods>

			<uni-load-more v-if="dataTotalPage > 1" :status="dataLoading"></uni-load-more>
			<u-empty-state v-if="dataTotalPage == 0" value="暂无相关药品"></u-empty-state>
		</scroll-view>

		<u-bottom-button v-if="category == '4,5,6'" value="确定用量" type="0" @click="confirmWmDosage"></u-bottom-button>
		<u-bottom-button v-if="category == '7'" value="确定用量" type="0" @click="confirmTcmDosage"></u-bottom-button>
	</view>
</template>

<script>
// 4西药  5中药  -  旧版本
import uSearch from '@/components/u-search/u-search.vue';
import uSelectGoods from '@/components/u-select-goods/u-select-goods.vue';
import uniLoadMore from '@/components/uni/uni-load-more/uni-load-more.vue';
import uEmptyState from '@/components/u-empty-state/u-empty-state.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uSearch,
		uSelectGoods,
		uBottomButton,
		uniLoadMore,
		uEmptyState
	},
	data() {
		return {
			goodsName: '',
			pageNo: 1,
			pageSize: 20,
			dataTotalPage: 1, //数据总数
			dataLoading: 'loading', //数据加载
			goodsList: [],
			category: '',
			common: 0, //是否常用药品  0全部 1非常用药品  2常用药品
			tabShow: false,
			merchantId: '', //机构id
		};
	},
	computed: {
		...mapState({
			recipeDetailDTO: state => state.recipeForm.recipeDetailDTO
		})
	},
	onLoad(option) {
		this.category = option.category; // 4,5,6西药  7中药
		this.merchantId = option.merchantId || ''

		this.tabShow = option.tabShow == 1 ? true : false;

		if (this.category == 45) {
			this.category = '4,5,6,7';
			this.common = 1;
		}
	},
	onShow() {
		this.search();
	},
	methods: {
		...mapMutations({
			setRecipeDetailDTO: 'setRecipeDetailDTO'
		}),

		tabChange(e) {
			this.common = e;
			this.search();
		},


		//加入常用药品
		addCommonUseCommodity(id) {
			this.$api
				.addCommonUseCommodity({
					params: {
						commodityId: id
					}
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '加入成功',
							icon: 'none'
						});
						this.search();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//配置商品列表数量
		setGoodsNum() {
			this.goodsList.forEach(key => {
				if (key.buyNum == null) {
					key.buyNum = 0;
				}
				this.recipeDetailDTO.forEach(key2 => {
					if (key2.buyNum > 0 && key.id == key2.id) {
						key.buyNum = key2.buyNum;
					}
				});
			});
		},

		//西药编辑用量
		editDosage(item) {
			// let b = true;
			// this.recipeDetailDTO.forEach(key => {
			// 	if (key.id == item.id) {
			// 		b = false;
			// 	}
			// });
			// if (b) {
			// 	item.buyNum = 0;
			// 	this.recipeDetailDTO.push(item);
			// }

			// this.setRecipeDetailDTO(this.recipeDetailDTO);
			this.gotoRouter('/pages-doctor/wmDosage/wmDosage?goodsId=' + item.id);
		},

		search(e) {
			this.pageNo = 1;
			this.goodsList = [];
			this.dataTotalPage = 1;
			if (e) {
				this.goodsName = e.value;
			}

			this.scrollLoading();
		},

		//商品列表
		queryCommodityList() {
			this.$api
				.queryCommodityList({
					params: {
						category: this.category,
						name: this.goodsName,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						common: this.common,
						merchantId: this.merchantId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.dataTotalPage = res.result.pages;

						if (this.pageNo == 1) {
							this.goodsList = res.result.records;
						} else {
							this.goodsList = this.goodsList.concat(res.result.records);
						}

						if (res.result.current >= res.result.pages) {
							this.dataLoading = 'noMore';
						} else {
							this.dataLoading = 'loading';
						}
						this.pageNo++;
						this.setGoodsNum();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//滚动加载
		scrollLoading() {
			if (this.pageNo <= this.dataTotalPage) {
				this.queryCommodityList();
			}
		},

		selectGoodsChange(e, index) {
			this.goodsList[index].buyNum = e;
		},

		//确定中药用量
		confirmTcmDosage() {
			this.setRecipeDetailDTO([]);
			this.goodsList.forEach(key => {
				if (key.buyNum > 0) {
					let data = JSON.parse(JSON.stringify(key))
					data.commodityId = key.id;
					data.commodityNum = key.buyNum;
					data.commodity = key
					this.recipeDetailDTO.push(data);
				}
			});
			this.setRecipeDetailDTO(this.recipeDetailDTO);
			uni.navigateBack({
				delta: 1
			});
		},

		//确定西药用量
		confirmWmDosage() {
			this.goodsList.forEach(key => {
				this.recipeDetailDTO.forEach(key2 => {
					if (key.buyNum > 0 && key.id == key2.id) {
						key2.buyNum = key.buyNum;
					}
				});
			});

			this.setRecipeDetailDTO(this.recipeDetailDTO);
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="less">
@import './drugList.less';
</style>
